<template>
  <div class="min-h-screen bg-zinc-900 text-white">
    <div class="max-w-md mx-auto">
      <h1 class="text-lg text-white library-title px-2 py-2">媒体库</h1>

      <div class="space-y-2 px-2 py-2">
        <div class="flex items-center p-3 bg-zinc-800">
          <div class="flex items-center gap-3"></div>
          项目空间使用情况
        </div>
        <MediaLibraryItem
          :class="{ '!border-white !bg-[#ffffff30] hover:!bg-[#ffffff50] hover:!border-white': +item.key === mediaType }"
          v-for="item in mediaItems"
          :key="item.type"
          :title="item.title"
          :count="mediaInfo[item.countKey]"
          :size="mediaInfo[item.sizeKey]"
          @click="() => store.commit('SET_MEDIA_TYPE', item.key)"
        >
          <component :is="item.icon" class="w-6 h-6 text-gray-400" />
        </MediaLibraryItem>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import store from '@/store'
import { ImageIcon, VideoIcon } from 'lucide-vue-next'
const mediaInfo = reactive({
  total_photo_num: 0,
  total_video_num: 0,
  total_photo_size: '0',
  total_video_size: '0'
})

interface MediaItem {
  type: string
  icon: any
  title: string
  countKey: keyof typeof mediaInfo
  sizeKey: keyof typeof mediaInfo
  key: 0 | 1 | 2
}
const mediaType = computed(() => store.state.mediaType)
const mediaItems: MediaItem[] = [
  {
    type: 'photo',
    icon: ImageIcon,
    title: '照片',
    countKey: 'total_photo_num',
    sizeKey: 'total_photo_size',
    key: 1
  },
  {
    type: 'video',
    icon: VideoIcon,
    title: '视频',
    countKey: 'total_video_num',
    sizeKey: 'total_video_size',
    key: 2
  }
]
watch(
  () => store.state.mediaInfo,
  (newVal, oldVal) => {
    mediaInfo.total_photo_num = newVal.total_photo_num
    mediaInfo.total_video_num = newVal.total_video_num
    mediaInfo.total_photo_size = newVal.total_photo_size
    mediaInfo.total_video_size = newVal.total_video_size
  },
  { deep: true }
)
</script>
